<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 
      场景：
      当我们需要在每个格子之间添加间距时，通过传统方式需要处理容器的多余的外边距

      方法：
      gap的值是不会算在item的margin或者padding里面
     gap 替换 margin和padding，因为容器的上下和左右外边也会加入计算，而gap就不会了
      传统方式：
      margin-right:
      margin-bottom:
      需要处理：
      每行最后一列的margin-right处理一下
      每列最后一行的margin-bottom处理一下
      一旦改变了列数，此时又得改变计算方式
      问题：
      如何知道元素是最后一行？


      遇到的难题：
      如何通过css获取最后一行？
      临时解决方案：
      1.通过js
      2.通过每一行包一层

      如何定义为最后一行？
      1.小于3n
      2.

      用nth-child无法获取最后一行

      gap写法：
        gap: 10px; 行间距 列间距
        gap: 10px 20px; 
        row-gap: 10px;
        column-gap: 20px;
  
      
      */

      .list0 {
        margin: 0px;
        padding: 0px;
        display: flex;
        /* warp 会换行，nowrap不会换行 */
        flex-wrap: wrap;
      }

      .list0 .item {
        list-style: none;
        flex-basis: calc(33.33% - 4px);
        /* width: 3px; */
        height: 100px;
        background-color: grey;
        margin-right: 2px;
        margin-bottom: 2px;
      }

      /*
      nth-child(公式)
      <An+B> 
      表示元素在兄弟元素列表中的位置是 An+B 模式的元素，其中 n 为正整数或 0，A 和 B 为整数，且 A 不为 0。其中：

      A 是整数步长，
      B 是整数偏移量，
      n 是从 0 开始的所有非负整数。

      公式=你想第几位推到出来的公式
      我想每第三位=3n
      n=0,3*0=0 第0位
      n=1,3*1=3 第3位
      n=2,3*2=6 第6位
      左边是计算开始的索引，右边是结算出来结果的匹配位置

      结论：
      n永用从0开始计算
      
      */

      /*第1列(从1开始，间隔3个):1,4,7*/
      .list0 .item:nth-child(3n-2) {
        background-color: yellowgreen;
      }
      /* 第2列:2,5,8 */
      .list0 .item:nth-child(3n-1) {
        background-color: tomato;
      }
      /*第3列:3,6,9*/
      .list0 .item:nth-child(3n) {
        margin-right: 0;
        background-color: skyblue;
      }
      /*最后一个元素*/
      .list0 .item:nth-last-child(-n + 1) {
        margin-bottom: 0;
      }

      .list1 {
        margin: 0px;
        padding: 0px;
        display: flex;
        /* warp 会换行，nowrap不会换行 */
        flex-wrap: wrap;
        gap: 4px;
      }

      .list1 .item {
        list-style: none;
        flex-basis: 33%;
        /* width: 3px; */
        height: 100px;
        background-color: grey;
      }

      /* .list1 .item:nth-child(1) {
        background-color: tomato;
      }
      .list1 .item:nth-child(2) {
        background-color: tomato;
      }
      .list1 .item:nth-child(3) {
        background-color: tomato;
      } */

      /*第1行:1,2,3*/
      .list1 .item:nth-child(n) {
        background-color: gold;
      }

      /*第2行:4，5，6*/
      .list1 .item:nth-child(n + 4) {
        background-color: darkblue;
      }

      /*第3行：7,8,9*/
      .list1 .item:nth-child(n + 7) {
        background-color: lime;
      }
    </style>
  </head>
  <body>
    <ul class="list0">
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
    </ul>

    <ul class="list1">
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
    </ul>

    <script>
      const list = document.querySelector(".list0");
      const children = list.children;

      getComputedStyle(children[0]);

      let row1 = children;
      console.log(children);

      for (let index = 1; index < 10; index++) {
        const row = Math.ceil(index / 3);
        console.log(row, index);
      }
    </script>
  </body>
</html>
